<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>事件的基本使用</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        事件的基本使用:
            1.使用v-on :xxx或@xxx绑定事件，其中xxx是事件名;
            2.事件的回调需要配置在methods对象中，最终会在vm 上;
            3.methods中配置的函数，不要用箭头函数!否则this就不是vm了;
            4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;
            5.@click="demo”和@click="demo($event)”效果一致，但后者可以传参; 
    -->

    <div id="app">
        <h2>欢迎来到{{name}}学习</h2>
        <button v-on:click="showInfo1">点我提示信息1(不传参)</button>
        <!-- 简写方式 -->
        <button @click="showInfo2($event,66)">点我提示信息2(传参)</button>
    </div>
    <script>
    //配置完全局配置之后再创建Vue实例,关闭Vue的生产提示标识
     Vue.config.productionTip=false;
        var vm=new Vue({
           el:'#app',
           data:{
            name: '尚硅谷'
           },
           methods:{
               showInfo1(event){
                   console.log(event.target.innerText);
                   alert("同学你好!");
               },
               showInfo2(event,number){
                   console.log(event,number);
                   alert("同学你好!!");
               }
           }
        });
    </script>
</body>

</html>